<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }
        body{
            font-size: 1.1111rem;
            font-family: 微软雅黑;
            background-color: #fff;
            overflow: hidden;/*
            -webkit-user-select:none;*/
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        a{
            text-decoration: none;
            color: #8c8c8c;
        }
        a.register{
            color: #4c97fb;
        }
        ul li{
            list-style: none;
        }
        #box{/*
            border: 1px solid red;*/
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }
        .top{/*
            border: 1px solid rgb(0, 255, 38);*/
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .top .icon{/*
            border: 1px solid red;*/
            border-radius: 50%;
            width: 4.8309rem;
            height: 4.8309rem;
            margin-top: 4.8309rem;
            margin-bottom: 3.6232rem;
            background: url(./log/images/XGB_logo_1000_1000.png.webp) no-repeat;
            background-size: contain;
        }
        .top .form{/*
            border: 1px solid red;*/
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding: .2415rem;
            width: 80%;
        }
        .form>div{
            width: 100%;
            margin-bottom: .6039rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
        }
        .form input{
            all: unset;
            width: 100%;
            border: .0725rem solid rgba(128, 128, 128, 0.522);
            border-radius: 1.4493rem;
            height: 2.8986rem;
            box-sizing: border-box;
            padding-left: 2.7295rem;
            padding-right: .4831rem;
            font-size: 1.1594rem;

        }
        .icon1{/*
            border: 1px solid red;*/
            width: 1.9324rem;
            height: 1.9324rem;
            margin-left: .4831rem;
            position: absolute;
            background: url(./log/images/user.webp) no-repeat;
            background-size: contain;
        }
        .icon2{/*
            border: 1px solid red;*/
            width: 1.9324rem;
            height: 1.9324rem;
            margin-left: .4831rem;
            position: absolute;
            background: url(./log/images/pwd.webp) no-repeat;
            background-size: contain;
        }
        input::placeholder{
            color: #bcbcbc;
        }
        input:focus{
            border: .0966rem solid #4c97fb;
            box-shadow: .1208rem .1208rem .2415rem #a5a5a583;
        }
        .form button{
            all: unset;
            width: 100%;
            height: 2.8986rem;
            border-radius: 1.4493rem;
            background: #4c97fb;
            line-height: 100%;
            text-align: center;
            color: #fff;
            font-weight: 590;
            font-family: 黑体;
            font-family: SimHei;
            margin-top: .9662rem;
        }
        .bottom{/*
            border: 1px solid red;*/
            color: #8c8c8c;
            font-size: .9662rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-bottom: 15%;
        }

        /*弹窗样式*/
        #alert{
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .window{
            border-radius: .3623rem;
            font-size: 1.087rem;
            color: #2c2c2c;
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;/*
            box-sizing: border-box;
            padding: .4831rem .9662rem;*/
            background-color: #ffffff;
            overflow: hidden;
        }
        .window .alt_title{
            /*
            border: 1px solid red;*/
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: end;
            height: 2.657rem;
            font-weight: 600;

        }
        .window .alt_body{
            /*
            border: 1px solid red;*/
            width: 100%;
            min-height: 5.5556rem;
            box-sizing: border-box;
            padding: .9662rem .9662rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .window .action1{
            /**/
            border-top: .0604rem solid rgb(207, 207, 207);
            width: 100%;
            display: flex;
            flex-direction: row;

        }
        .window .action1 div{
            width: 50%;
            height: 3.1401rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fb4c4c;
        }
        .window .action2{
            border-top: .0604rem solid rgb(207, 207, 207);
            width: 100%;
        }
        .window .action2 div{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 3.1401rem;
            color: #4c97fb;
        }
        .window .action1 div:nth-child(1){
            border-right: .0604rem solid rgb(207, 207, 207);
        }
        .window .action1 div:nth-child(2){
            color: #4c97fb;
            border-left: .0604rem solid rgb(207, 207, 207);
        }
    </style>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="./log/lib/axios.js"></script>
    <script src="./log/lib/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
</head>
<body>
    <div id="box">
        <div class="top">
            <div class="icon"></div>
            <div class="form">
                <div>
                    <div class="icon1"></div>
                    <input type="text" v-model="userid" name="" id="userid" placeholder="学号/手机号/邮箱">
                </div>
                <div>
                    <div class="icon2"></div>
                    <input type="password" v-model="password" name="password" id="" placeholder="密码">
                </div>
                
                <button @click="handleClick()" type="button">登录</button>
                
            </div>
        </div>
        <div class="bottom">
            <a class="register" href="./register.html">注册</a>&nbsp;|&nbsp;<a class="forget" href="">忘记密码</a>
        </div>

        <!-- 弹窗 -->
        <div id="alert" v-show="alertShow">
            <div class="window">
                <div class="alt_title">{{alt_title}}</div>
                <div class="alt_body">{{alt_body}}</div>
                <div class="action action1" v-show="action1Show">
                    <div class="cancel" @click="cancel()">取消</div>
                    <div class="do" @click="yes()">确定</div>
                </div>
                <div class="action action2" v-show="!action1Show">
                    <div class="cancel" @click="cancel()">确定</div>
                </div>
            </div>
        </div>

    </div>
    
    <script>
        new Vue({
            el: "#box",
            data: {
                userid: "",
                password: "",
                alertShow: false,
                action1Show: false,
                alt_title: "提示",
                alt_body: ""
            },
            methods: {
                handleClick(){
                    //alert("账号："+this.userid+" 密码："+this.password)
                    if(/^\s*$/.test(this.userid)){
                        this.alertShow = true
                        this.alt_body="请填写账号！"
                    }else if(/^\s*$/.test(this.password)){
                        this.alertShow = true
                        this.alt_body="请填写密码！"
                    }else{
                        let btn = document.querySelector("button")
                        btn.style.background="#85b8fb"
                        fetch(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/login/userLogin?userid=${this.userid}&password=${this.password}`)
                        .then(res=>res.json())
                        .then(res=>{
                            btn.style.background="#4c97fb"
                            console.log("res:")
                            console.log(res)
                            if(res.status === 0){
                                this.alertShow = true
                                this.alt_body="账号或密码错误！"
                            }else if(res.status === 1){
                                //写入本地localstorage
                                let userInfo = {
                                    id: res.res.data[0]._id,
                                    userid: res.res.data[0].userid,
                                    name: res.res.data[0].name,
                                    userImg: res.res.data[0].userImg,
                                    gender: res.res.data[0].gender
                                }
                                window.localStorage.setItem('XGB-user', JSON.stringify(userInfo))
                                window.location.replace('./index.html')
                                //获取：JSON.parse(localStorage.getItem('XGB-user'))
                                
                            }
                        })
                    }
                    
                    
                    
                },
                cancel(){
                    this.alertShow = false
                },
                yes(){
                    console.log("用户点击 “确定”")
                }
                
            }
        })
    </script>
</body>
</html>